<template>
  <div class="content">
    <div id="allmap" class="bm-view"></div>
    <div class="left">
      <div class="leftOne">
        <div class="bar">人员预警</div>
        <div class="seamless-warp">
          <div class="iocn" v-for="(item, index) in listData" :key="index">
            <div @click="redClick(item)">
              <div class="rotate"></div>
              <img
                src="~@/assets/dataVisualization/commandCenter/total.png"
                class="user"
              />
              <div
                :style="{ '--color': item.color }"
                class="title"
                v-text="item.title"
              ></div>
              <div class="data" v-text="item.data + '人'"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="leftTwo">
        <div class="bar">AI预警</div>
        <div class="seamless-warp">
          <div class="iocn" v-for="(item, index) in listDataTwo" :key="index">
            <div @click="redClick(item)">
              <div class="rotate"></div>
              <img
                src="~@/assets/dataVisualization/commandCenter/total.png"
                class="user"
              />
              <div
                :style="{ '--color': item.color }"
                class="title"
                v-text="item.title"
              ></div>
              <div class="data" v-text="item.data + '人'"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="bar">危险预警</div>
      <ul class="item">
        <li>序号</li>
        <li>姓名</li>
        <li>性别</li>
        <li>危险级别</li>
      </ul>
      <vue-seamless-scroll
        :data="rightListData"
        :class-option="optionHover"
        class="seamless-warp"
        :style="cssVarsH"
      >
        <div class="box">
          <div class="iocn" v-for="(item, index) in rightListData" :key="index">
            <ul class="item">
              <li class="sNo" v-text="item.id"></li>
              <li class="name" v-text="item.name"></li>
              <li class="sex">
                <dict-tag :options="dict.type.sys_user_sex" :value="item.sex" />
              </li>
              <li
                class="hazardLevel"
                v-text="item.hazardDegree"
                :title="item.hazardDegree"
              ></li>
            </ul>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="bottom">
      <div class="title">AI人脸识别智能视频分析</div>
      <div class="titleRight">
        报警中心
        <img
          src="~@/assets/dataVisualization/earlyWarningCenter/chevronDoubleStates.png"
        />
      </div>
      <vue-seamless-scroll
        :data="bottomListData"
        :class-option="optionHoverX"
        class="seamless-warp"
        :style="cssVars"
      >
        <div class="floatBottom">
          <div
            class="aiBottom"
            v-for="(item, index) in bottomListData"
            :key="index"
            @click="pointMarkers1(item)"
          >
            <div class="bottomImg">
              <img :src="item.photo" width="190px" height="124px" />
            </div>
            <div class="aiBottomTitle">{{ item.name }}</div>
            <div class="position">
              <dict-tag :options="dict.type.sys_user_sex" :value="item.sex" />
            </div>
            <div class="time">{{ item.hazardDegree }}</div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
// 引入百度地图样式
import bdMapJson from "@/utils/bdMapJson";
//导入重点人员位置信息aip
import keyPersonnelLocationInformationAip from "@/api/keyPersonnelLocationInformation";
//导入重点人员基本信息aip
import keyPersonnelBasicInformationAip from "@/api/keyPersonnelBasicInformation";
export default {
  dicts: ["sys_user_sex"],
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      mapStyle: {
        styleJson: [],
      },
      //保存地图对象
      bdMap: {},
      bottomListData: [],
      listData: [
        {
          title: "红色通缉令",
          data: 0,
          color: "#FF0000",
        },
        {
          title: "橙色通缉令",
          data: 0,
          color: "#FF6100",
        },
        {
          title: "蓝色通缉令",
          data: 0,
          color: "#0000FF",
        },
        {
          title: "绿色通缉令",
          data: 0,
          color: "#00FF00",
        },
        {
          title: "青色通缉令",
          data: 0,
          color: "#00FFFF",
        },
      ],
      listDataTwo: [
        {
          title: "AI捕获落水",
          data: 0,
          color: "#FF0000",
        },
        {
          title: "AI捕获聚众",
          data: 0,
          color: "#FF6100",
        },
        {
          title: "AI捕获打架",
          data: 0,
          color: "#0000FF",
        },
        {
          title: "AI捕获求救",
          data: 0,
          color: "#00FF00",
        },
        {
          title: "AI捕获摔倒",
          data: 0,
          color: "#00FFFF",
        },
      ],
      rightListData: [],
      //保存弹窗下标号
      labelMarkers: {},
      labelStyle: {
        // 自定义提示框样式
        padding: "0px",
        color: "#000",
        fontSize: "12px",
        minHeight: "20px",
        borderColor: "rgba(0, 0, 0, 0)",
        lineHeight: "20px",
        fontFamily: "微软雅黑",
        backgroundColor: "rgba(255,255,255, 0)",
        cursor: "pointer",
      },
      keyPersonnelBasicInformationList: [],
    };
  },
  created() {
    /**
     * 百度地图样式
     */
    this.mapStyle.styleJson = bdMapJson.styleJson;
  },
  computed: {
    optionHover() {
      return {
        hoverStop: true, // 鼠标悬停停止滚动
        direction: 1, // 向下/上滚动
        step: 0.5, // 滚动速度
        // singleHeight: 20, // 滚动单行
        // waitTime:2500 单行停顿时间
      };
    },
    optionHoverX() {
      return {
        hoverStop: true, // 鼠标悬停停止滚动
        direction: 2, // 向下/上滚动
        step: 0.5, // 滚动速度
      };
    },
    cssVars() {
      return {
        "--width": this.bottomListData.length * 282 + "px",
      };
    },
    cssVarsH() {
      return {
        "--height": this.rightListData.length * 56 + "px",
      };
    },
  },
  mounted() {
    this.createMpa();
    this.init();
    //挂载移除单个硬件弹窗方法
    window.removeOverlay1 = (id) => {
      this.removeOverlay1(id);
    };
  },
  methods: {
    //初始化
    init() {
      this.listAll();
    },
    createMpa() {
      // GL版命名空间为BMapGL
      // 按住鼠标右键，修改倾斜角和角度
      var map = new BMapGL.Map("allmap"); // 创建Map实例
      map.centerAndZoom(
        new BMapGL.Point(119.65203497210796, 27.120922274037253),
        20
      ); // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      map.setMapStyleV2({
        styleId: "4a49d63086fc00f6457e87f0fd965c7c",
      });
      //设置角度
      map.setHeading(150.5);
      map.setTilt(63);
      var styleOptions = {
        strokeColor: "#5E87DB", // 边线颜色
        fillColor: "#5E87DB", // 填充颜色。当参数为空时，圆形没有填充颜色
        strokeWeight: 2, // 边线宽度，以像素为单位
        strokeOpacity: 1, // 边线透明度，取值范围0-1
        fillOpacity: 0.2, // 填充透明度，取值范围0-1
      };
      var labelOptions = {
        borderRadius: "2px",
        background: "#FFFBCC",
        border: "1px solid #E1E1E1",
        color: "#703A04",
        fontSize: "12px",
        letterSpacing: "0",
        padding: "5px",
      };
      //右键菜单
      var menu = new BMapGL.ContextMenu();
      var txtMenuItem = [
        {
          text: "清空覆盖物",
          callback: function () {
            map.clearOverlays();
          },
        },
      ];
      for (var i = 0; i < txtMenuItem.length; i++) {
        menu.addItem(
          new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100)
        );
      }
      map.addContextMenu(menu);
      //保存地图
      this.bdMap = map;
      //撒点
      this.pointMarkers();
    },
    //查询所有重点人员基本信息
    async listAll() {
      let res =
        await keyPersonnelBasicInformationAip.getKeyPersonnelBasicInformationListAll();
      this.bottomListData = res.data;
      this.rightListData = res.data;
    },
    // 清除所有覆盖物
    allRemoveOverlay() {
      const result = this.keyPersonnelBasicInformationList;
      result.forEach((item, index) => {
        var id = item.id;
        this.bdMap.removeOverlay(this.labelMarkers[id]);
      });
    },
    //移除单个点位上图弹窗
    removeOverlay1(id) {
      this.bdMap.removeOverlay(this.labelMarkers[id]);
    },
    //单个点位上图
    async pointMarkers1(item) {
      this.bdMap.clearOverlays();
      let res =
        await keyPersonnelLocationInformationAip.getKeyPersonnelLocationInformationByIdApi(
          {
            personnelId: item.id,
          }
        );
      //设置图标
      // 创建红色通缉令图标
      var myIcon = new BMapGL.Icon(
        "static/dataVisualization/earlyWarningCenter/red.png",
        new BMapGL.Size(36, 53)
      );
      var pt = new BMapGL.Point(res.data.lng, res.data.lat);
      var marker = new BMapGL.Marker(pt, {
        icon: myIcon,
      });
      // 将标注添加到地图
      this.bdMap.addOverlay(marker);
      var opts = {
        position: new BMapGL.Point(res.data.lng, res.data.lat), // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
      };
      //获取弹窗内容
      var content = this.getAlarmContent(item);
      // 创建文本标注对象
      var label = new BMapGL.Label(content, opts);
      // 自定义文本标注样式
      label.setStyle(this.labelStyle);
      this.allRemoveOverlay();
      this.bdMap.addOverlay(label);
      //保存弹窗下标到labelMarkers
      this.labelMarkers[res.data.id] = label;
    },
    async pointMarkers() {
      let res = await keyPersonnelLocationInformationAip.listAllApi();
      this.keyPersonnelBasicInformationList = res.data;
      if (res.success) {
        for (let i = 0; i < res.data.length; i++) {
          const e = res.data[i];
          if (e.type === 0) {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/red.png",
              new BMapGL.Size(36, 53)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            //设置人数
            this.listData[0].data = this.listData[0].data + 1;
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 1) {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/orange.png",
              new BMapGL.Size(36, 53)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            //设置人数
            this.listData[1].data = this.listData[1].data + 1;
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 2) {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/blue.png",
              new BMapGL.Size(36, 53)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            //设置人数
            this.listData[2].data = this.listData[2].data + 1;
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 3) {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/green.png",
              new BMapGL.Size(36, 53)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            //设置人数
            this.listData[3].data = this.listData[3].data + 1;
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 4) {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/ching.png",
              new BMapGL.Size(36, 53)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            //设置人数
            this.listData[4].data = this.listData[4].data + 1;
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 5) {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/Ai0.png",
              new BMapGL.Size(124, 110)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            //设置人数
            this.listDataTwo[0].data = this.listDataTwo[0].data + 1;
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 6) {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/Ai1.png",
              new BMapGL.Size(124, 110)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            //设置人数
            this.listDataTwo[1].data = this.listDataTwo[1].data + 1;
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 7) {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/Ai2.png",
              new BMapGL.Size(124, 110)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            //设置人数
            this.listDataTwo[2].data = this.listDataTwo[2].data + 1;
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 8) {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/Ai3.png",
              new BMapGL.Size(124, 110)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            //设置人数
            this.listDataTwo[3].data = this.listDataTwo[3].data + 1;
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 9) {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/Ai4.png",
              new BMapGL.Size(124, 110)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            //设置人数
            this.listDataTwo[4].data = this.listDataTwo[4].data + 1;
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          }
        }
      }
    },
    async redClick(item) {
      this.bdMap.clearOverlays();
      let res = await keyPersonnelLocationInformationAip.listAllApi();
      if (res.success) {
        for (let i = 0; i < res.data.length; i++) {
          const e = res.data[i];
          if (e.type === 0 && item.title === "红色通缉令") {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/red.png",
              new BMapGL.Size(36, 53)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 1 && item.title === "橙色通缉令") {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/orange.png",
              new BMapGL.Size(36, 53)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 2 && item.title === "蓝色通缉令") {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/blue.png",
              new BMapGL.Size(36, 53)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 3 && item.title === "绿色通缉令") {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/green.png",
              new BMapGL.Size(36, 53)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 4 && item.title === "青色通缉令") {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/ching.png",
              new BMapGL.Size(36, 53)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 5 && item.title === "AI捕获落水") {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/Ai0.png",
              new BMapGL.Size(124, 110)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 6 && item.title === "AI捕获聚众") {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/Ai1.png",
              new BMapGL.Size(124, 110)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 7 && item.title === "AI捕获打架") {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/Ai2.png",
              new BMapGL.Size(124, 110)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 8 && item.title === "AI捕获求救") {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/Ai3.png",
              new BMapGL.Size(124, 110)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          } else if (e.type === 9 && item.title === "AI捕获摔倒") {
            //设置图标
            // 创建红色通缉令图标
            var myIcon = new BMapGL.Icon(
              "static/dataVisualization/earlyWarningCenter/Ai4.png",
              new BMapGL.Size(124, 110)
            );
            var pt = new BMapGL.Point(e.lng, e.lat);
            var marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(e.lng, e.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let res = await keyPersonnelBasicInformationAip.hazardDegreeApi({
                id: e.personnelId,
              });
              //获取弹窗内容
              var content = that.getAlarmContent(res.data);
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[e.id] = label;
            });
          }
        }
      }
    },
    /**
     * 获取硬件弹窗内容
     */
    getAlarmContent(item) {
      var content = "";
      var aiContent = `<div style="cursor: default;width: auto;min-width: 320px;height: 200px;padding:7px 7px 0px 6px;background: url(static/dataVisualization/commandCenter/firePopUpWindow.png) no-repeat;background-size: 100% 100%;color:#fff;">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 6px;">
          <div style="font-size: 16px;font-family: Microsoft YaHei;font-weight: 400;font-style: italic;color: #F34336;">${item.hazardDegree}</div>
          <div style="margin: 0 auto 0 9px;"><img src="static/dataVisualization/commandCenter/line-red.png"></div>
          <div style="cursor: pointer;margin:9px 2px 0px 0px;cursor: pointer;"><img src="static/dataVisualization/commandCenter/closeRed.png" onclick="removeOverlay1('${item.id}')"></div>
        </div>
        <div style="display: flex;justify-content: flex-start;align-items: center;padding: 0 6px;">
             <viewer><img style="width:200px;height:127px;margin-right: 8px;" src="${item.photo}"></viewer>
            <div style="width:calc(100% - 224px);">
                <div><span style="color:#FFA051;margin-right: 5px;">姓名:</span>${item.name}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">身份证:</span>${item.idNumber}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">年龄:</span>${item.age}</div>
            </div>
        </div>
      </div>`;
      switch (item.hazardDegree) {
        case "红色通缉令":
          content = aiContent;
          break;
        case "橙色通缉令":
          content = aiContent;
          break;
        case "蓝色通缉令":
          content = aiContent;
          break;
        case "绿色通缉令":
          content = aiContent;
          break;
        case "青色通缉令":
          content = aiContent;
          break;
        case "AI捕获落水":
          content = aiContent;
          break;
        case "AI捕获聚众":
          content = aiContent;
          break;
        case "AI捕获打架":
          content = aiContent;
          break;
        case "AI捕获求救":
          content = aiContent;
          break;
        case "AI捕获摔倒":
          content = aiContent;
          break;
      }
      return content === undefined ? "" : content;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 1920px;
  height: 980px;
  position: relative;
  .bm-view {
    position: absolute;
    width: 1920px;
    height: 980px;
    z-index: 2;
  }
  .bottom {
    overflow: hidden;
    position: absolute;
    left: 360px;
    bottom: 40px;
    width: 1202px;
    height: 300px;
    background: url(~@/assets/dataVisualization/earlyWarningCenter/earlyWarningCenterBottom.png);
    z-index: 3;
    .title {
      position: absolute;
      top: 20px;
      left: 20px;
      font-weight: 700;
      font-size: 1.1em;
      color: #03fbff;
    }
    .titleRight {
      position: absolute;
      width: 100px;
      height: 30px;
      line-height: 30px;
      top: 20px;
      right: 20px;
      font-weight: 700;
      font-size: 1.1em;
      color: red;
      img {
        position: absolute;
        top: 3px;
        right: 7px;
      }
    }
    .seamless-warp {
      overflow: hidden;
      // width: 4000px;
      width: 1122px;
      height: 300px;
      margin-left: 40px;
      .floatBottom {
        width: var(--width);
        .aiBottom {
          cursor: pointer;
          float: left;
          position: relative;
          width: 210px;
          height: 220px;
          background: url(~@/assets/dataVisualization/earlyWarningCenter/aiBottom.png)
            no-repeat center;
          margin-left: 72px;
          margin-top: 60px;
          .bottomImg {
            position: absolute;
            width: 190px;
            height: 124px;
            top: 10px;
            left: 10px;
            background-color: #a8d6ff;
          }
          .aiBottomTitle {
            position: absolute;
            top: 134px;
            width: 210px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-weight: 600;
            font-size: 1em;
            color: #a8d6ff;
          }
          .position {
            position: absolute;
            top: 169px;
            width: 210px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 1em;
            color: #a8d6ff;
          }
          .time {
            position: absolute;
            top: 194px;
            width: 210px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 1em;
            color: #a8d6ff;
          }
        }
      }
    }
  }
  .right {
    position: absolute;
    right: 0;
    top: 0;
    width: 320px;
    height: 980px;
    background: url(~@/assets/dataVisualization/earlyWarningCenter/earlyWarningCenterRight.png);
    z-index: 3;
    .item {
      position: absolute;
      top: 70px;
    }
    .item li {
      width: 70px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      float: left;
      color: white;
      list-style-type: none;
    }
    .bar {
      position: absolute;
      top: 20px;
      width: 320px;
      height: 45px;
      padding-left: 40px;
      line-height: 45px;
      color: white;
      font-size: 1em;
      background: url(~@/assets/dataVisualization/bar.png) no-repeat center;
    }
    .seamless-warp {
      cursor: pointer;
      position: absolute;
      top: 109px;
      padding-left: 5px;
      width: 320px;
      height: 860px;
      overflow: hidden;
      text-align: center;
      .box {
        height: var(--height);
        .iocn {
          position: relative;
          width: 320px;
          height: 38px;
          background: url(~@/assets/dataVisualization/earlyWarningCenter/rightNew.png)
            no-repeat center;
          margin-top: 20px;
          .item {
            position: absolute;
            top: 0;
            left: 0;
            width: 280px;
            height: 36px;
            li {
              width: 70px;
              height: 36px;
              line-height: 36px;
              text-align: center;
              float: left;
              color: white;
              list-style-type: none;
            }
            .hazardLevel {
              color: red;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
  .left {
    width: 320px;
    height: 980px;
    position: absolute;
    .leftOne {
      position: absolute;
      width: 320px;
      height: 490px;
      background: url(~@/assets/dataVisualization/earlyWarningCenter/earlyWarningCenterLeft.png);
      z-index: 3;
      .bar {
        position: absolute;
        top: 20px;
        width: 320px;
        height: 45px;
        padding-left: 40px;
        line-height: 45px;
        color: white;
        font-size: 1em;
        background: url(~@/assets/dataVisualization/bar.png) no-repeat center;
      }
      .seamless-warp {
        cursor: pointer;
        position: absolute;
        top: 75px;
        padding-left: 30px;
        width: 320px;
        height: 415px;
        overflow: hidden;
        text-align: center;
        .iocn {
          position: relative;
          width: 320px;
          height: 80px;
          .rotate {
            position: absolute;
            top: 13.5px;
            left: 13.5px;
            width: 53px;
            height: 53px;
            background: url(~@/assets/dataVisualization/commandCenter/rotate.png)
              no-repeat;
            background-size: 100% 100%;
            animation: rotate 1.2s linear infinite;
          }
          .user {
            top: 23.5px;
            left: 26.5px;
            position: absolute;
          }
          .title {
            position: absolute;
            color: var(--color);
            font-size: 1.3em;
            top: 10.5px;
            left: 90px;
          }
          .data {
            position: absolute;
            color: white;
            font-size: 1.3em;
            top: 38.5px;
            left: 90px;
          }
        }
      }
    }
    .leftTwo {
      position: absolute;
      width: 320px;
      height: 490px;
      top: 490px;
      background: url(~@/assets/dataVisualization/earlyWarningCenter/earlyWarningCenterLeft.png);
      z-index: 3;
      .bar {
        position: absolute;
        top: 20px;
        width: 320px;
        height: 45px;
        padding-left: 40px;
        line-height: 45px;
        color: white;
        font-size: 1em;
        background: url(~@/assets/dataVisualization/bar.png) no-repeat center;
      }
      .seamless-warp {
        cursor: pointer;
        position: absolute;
        top: 75px;
        padding-left: 30px;
        width: 320px;
        height: 415px;
        overflow: hidden;
        text-align: center;
        .iocn {
          position: relative;
          width: 320px;
          height: 80px;
          .rotate {
            position: absolute;
            top: 13.5px;
            left: 13.5px;
            width: 53px;
            height: 53px;
            background: url(~@/assets/dataVisualization/commandCenter/rotate.png)
              no-repeat;
            background-size: 100% 100%;
            animation: rotate 1.2s linear infinite;
          }
          .user {
            top: 23.5px;
            left: 26.5px;
            position: absolute;
          }
          .title {
            position: absolute;
            color: var(--color);
            font-size: 1.3em;
            top: 10.5px;
            left: 90px;
          }
          .data {
            position: absolute;
            color: white;
            font-size: 1.3em;
            top: 38.5px;
            left: 90px;
          }
        }
      }
    }
  }
}
</style>
